import 'package:flutter/material.dart';
import 'package:t_flutter_test/pages/file_09/home/index.dart';
import 'package:t_flutter_test/pages/file_09/cate/index.dart';
import 'package:t_flutter_test/pages/file_09/cart/index.dart';
import 'package:t_flutter_test/pages/file_09/user/index.dart';

class File09BottomTabBarItem {
  String label;
  Widget icon;
  Widget activeIcon;

  File09BottomTabBarItem({
    required this.label,
    required this.icon,
    required this.activeIcon,
  });
}

class File09 extends StatefulWidget {
  const File09({super.key});

  @override
  File09State createState() => File09State();
}

class File09State extends State<File09> {
  /* 
    坑点:
      因为底部导航栏的图片是放在 assets/file_09_image/tabbar/ 目录下的
      由于 file_09_image 和 tabbar 都是文件夹, 所以需要在 pubspec.yaml 中配置
      assets:
        - assets/
        - assets/file_09_image/tabbar/
        
      ***注: 
      - assets/ 这个是原来配置的 打包只会打包 assets 目录下的文件资源, 文件夹是不会被打包的
   */
  final List<File09BottomTabBarItem> _bottomTabBar = [
    File09BottomTabBarItem(
      label: '首页',
      icon: Image.asset(
        'assets/file_09_image/tabbar/home.png',
        width: 24,
        height: 24,
      ),
      activeIcon: Image.asset(
        'assets/file_09_image/tabbar/home-active.png',
        width: 24,
        height: 24,
      ),
    ),
    File09BottomTabBarItem(
      label: '分类',
      icon: Image.asset(
        'assets/file_09_image/tabbar/cate.png',
        width: 24,
        height: 24,
      ),
      activeIcon: Image.asset(
        'assets/file_09_image/tabbar/cate-active.png',
        width: 24,
        height: 24,
      ),
    ),
    File09BottomTabBarItem(
      label: '购物车',
      icon: Image.asset(
        'assets/file_09_image/tabbar/cart.png',
        width: 24,
        height: 24,
      ),
      activeIcon: Image.asset(
        'assets/file_09_image/tabbar/cart-active.png',
        width: 24,
        height: 24,
      ),
    ),
    File09BottomTabBarItem(
      label: '我的',
      icon: Image.asset(
        'assets/file_09_image/tabbar/user.png',
        width: 24,
        height: 24,
      ),
      activeIcon: Image.asset(
        'assets/file_09_image/tabbar/user-active.png',
        width: 24,
        height: 24,
      ),
    ),
  ];

  int _activeIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: IndexedStack(
        index: _activeIndex,
        children: [
          File09HomePage(),
          File09CatePage(),
          File09CartPage(),
          File09UserPage(),
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _activeIndex,
        onTap: (index) {
          setState(() {
            _activeIndex = index;
          });
        },
        type: BottomNavigationBarType.fixed,
        selectedFontSize: 12,
        selectedItemColor: Colors.red,
        unselectedFontSize: 12,
        unselectedItemColor: Colors.black,
        items:
            _bottomTabBar.map((item) {
              return BottomNavigationBarItem(
                icon: item.icon,
                activeIcon: item.activeIcon,
                label: item.label,
              );
            }).toList(),
      ),
    );
  }
}
